<template>
  <div class="dn-banner">
    <div class="container dn-banner-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in data" :key="index">
          <div class="swiper-content dn-banner-img" :class="'dn-banner-img-' + bIndex" v-for="(bItem, bIndex) in data[index]" :key="bIndex">
            <a class="dn-banner-link" :href="bItem.url" target="_blank">
              <div class="dn-banner-scale">
                <img :src="bItem.pic"/>
                <p class="dn-banner-title">
                  <span>{{bItem.title}}</span>
                </p>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import './index.less'
import Swiper from 'swiper'
export default {
  name: 'DnBanner',
  componentName: 'DnBanner',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
      required: true
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      required: false
    },
    autoplay: {
      type: Object,
      default: () => {
        return {
          disableOnInteraction: false,
          autoplay: true,
          delay: 5000
        }
      },
      required: false
    }
  },
  data () {
    return {
      swiper: {}
    }
  },
  mounted () {
    /* eslint-disable no-new */
    this.swiper = new Swiper('.dn-banner-container', {
      pagination: this.pagination,
      autoplay: this.autoplay
    })
    /* eslint-enable no-new */
  }
}
</script>
